<template>
	<view
		class="container"
		:style="{
			paddingTop: offsetTop * 2 + 'rpx',
			paddingBottom: offsetBottom * 2 + 'rpx',
			paddingLeft: offsetLeft * 2 + 'rpx',
			paddingRight: offsetRight * 2 + 'rpx',
			background,
		}"
	>
		<SafeAreaContainer :isIgnoreMiniNavBar="false" :ignoreSafeAreaTop="false">
			<slot></slot>
		</SafeAreaContainer>
	</view>
</template>

<script>
import SafeAreaContainer from '@/components/SafeAreaContainer/SafeAreaContainer.vue';
export default {
	components: { SafeAreaContainer },
	name: 'SafeAreaContent',
	props: {
		// 顶部安全区偏移, 要和 SafeAreaNavBar 组件的 offsetTop 属性一致
		offsetTop: {
			type: [Number, String],
			default: 0,
		},
		// 底部安全区偏移, 要和 SafeAreaNavBar 组件的 offsetBottom 属性一致
		offsetBottom: {
			type: [Number, String],
			default: 0,
		},
		// 左侧安全区偏移, 要和 SafeAreaNavBar 组件的 offsetLeft 属性一致
		offsetLeft: {
			type: [Number, String],
			default: 0,
		},
		// 右侧安全区偏移, 要和 SafeAreaNavBar 组件的 offsetRight 属性一致
		offsetRight: {
			type: [Number, String],
			default: 0,
		},
		// 背景 可以是背景颜色，图片等
		background: {
			type: String,
			default: '#ffffff',
		},
	},
	computed: {},
	methods: {},
};
</script>

<style scoped>
.container {
	width: 100%;
	height: 100vh;
}
</style>
